<template>
    <div class="card-container" @mouseenter="mouseEnter()" @mouseleave="mouseLeave()"
         :class="{itemHover:itemHoverIndex==1}">
        <v-card height="220px">
            <v-img
                    class="white--text"
                    height="151px">
                <v-container fill-height fluid>
                    <v-layout fill-height>
                        <v-flex xs12 align-center flexbox>
                            <img :src="'static/img/' + card.data.meta_name + '.svg'"
                                 style="height: 110px;width: 100px" alt="static/img/mydata.svg"
                                 onerror="this.src='static/img/mydata.svg';this.onerror=null"/>
                        </v-flex>
                    </v-layout>
                </v-container>
            </v-img>
            <div class="data-info">
                <div class="data-info-container">
                    <div v-if="!card.data.userId" class="data-name">{{ card.data.meta_name }}</div>
                    <div v-if="card.data.userId" class="data-name">{{ card.data.name }}</div>
                    <div v-if="!card.data.userId" class="data-count">{{ card.data.volume }}条记录</div>
                    <div v-if="!card.data.userId" class="data-date">{{ lastUpdateTime}}</div>
                </div>
            </div>
            <div class="data-option">
                <div class="data-icon">
                    <i title="数据预览" class="fa fa-table" @click="previewData()" aria-hidden="true"></i>
                </div>
                <div v-if="isLoadToMap" class="data-icon">
                    <i title="数据上图" class="fa fa-globe" @click="openDataResourceOnMap()" aria-hidden="true"></i>
                </div>
                <!--<div class="data-icon">-->
                <!--<i :title="favoriteTitle" :class="favoriteClass" @click="chanegeFavorites()" aria-hidden="true"></i>-->
                <!--</div>-->
                <!--<div class="data-icon">-->
                <!--<i title="复制数据UUID" class="fa fa-files-o" @click="getUUIDByID()" aria-hidden="true"></i>-->
                <!--</div>-->
            </div>
        </v-card>
    </div>
</template>

<script>
    export default {
        name: "infoCard",
        components: {},
        props: {
            card: {type: Object, default: []}
        },
        data() {
            return {
                itemHoverIndex: null,
                previewDialogVisible: {
                    v: false
                }
            }
        },
        computed: {
            favoriteClass() {
                return this.card.isFavorite === "true" ? 'fa fa-star fa-star-full-yellow' : 'fa fa-star';
            },
            favoriteTitle() {
                return this.card.isFavorite === "true" ? '取消收藏' : '添加收藏';
            },
            lastUpdateTime() {//时间数据可视化
                return this.$date.formatTime(this.card.data.last_update_time)
            },
            isLoadToMap() {//判断是否可以数据上图
                let geomMark = this.card.data.geom_fields;
                switch (geomMark) {
                    case'lon,lat':
                    case'geom':
                    case'start_lon,start_lat,end_lon,end_lat':
                        return true;
                    default:
                        return false;
                }
            }
        },
        watch: {
            isFavorite(newV, oldV) {
                this.favoriteClass = newV === "true" ? 'fa fa-star fa-star-full-yellow' : 'fa fa-star';
                this.favoriteTitle = newV === "true" ? '取消收藏' : '添加收藏';
            }
        },
        methods: {
            mouseEnter() {
                this.itemHoverIndex = 1;
            },
            mouseLeave() {
                this.itemHoverIndex = null;
            },
            getUUIDByID() {
                let that = this;
                this.$axios.patch('static/json/getUUIDByID.json', {
                    id: that.card.id
                }).then(res => {
                    window.clipboardData.setData('Text', res);
                    that.$Bus.$emit("alertModalParams", {
                        alertType: "success",
                        alertDescription: "数据UUID复制成功"
                    })
                }).catch(() => {
                    that.$Bus.$emit("alertModalParams", {
                        alertType: "error",
                        alertDescription: "数据UUID复制失败"
                    })
                })
            },
            //修改对应数据的收藏属性，根据当前class判断当前是否收藏，如果收藏，点击后为取消收藏，反之添加收藏
            chanegeFavorites() {
                let that = this;
                if (this.favoriteClass === "fa fa-star") {
                    // this.$axios.post('/addToFavorites', {
                    //   id: this.card.id,
                    //   user: this.user
                    // }).then(function() {
                    // if (res.data == "success") {
                    this.card.isFavorite = "true";
                    that.$Bus.$emit("alertModalParams", {
                        alertType: "success",
                        alertDescription: "收藏成功"
                    });
                    // }
                    // }).catch(function(){
                    //   this.$emit("alertType", "error")
                    //   this.$emit("alertDescription","收藏失败")
                    // })
                }
                else {
                    // this.$axios.post('/removeFromFavorites', {
                    //   id: this.card.id,
                    //   user: this.user
                    // }).then(function() {
                    // if (res.data == "success"){
                    this.card.isFavorite = "false"
                    that.$Bus.$emit("alertModalParams", {
                        alertType: "error",
                        alertDescription: "收藏失败"
                    })
                    //   }
                    // }).catch(function(){
                    //   this.$emit("alertType", "error")
                    //   this.$emit("alertDescription","取消收藏失败")
                    // })
                }
            },
            //加载所点击的数据到地图上
            openDataResourceOnMap() {
                this.$Bus.$emit("mapDialogParams", {
                    title: this.card.data.meta_name,
                    visible: true,
                    queryUrl: "/data/preview/" + this.card.data.pk_meta_id + "/geojson",
                    queryParams: {
                        offset: 0,
                        size: 200//TODO:需要设置分页,注意offset要乘以size
                    }
                });
            },
            previewData() {//数据预览
                this.previewDialogVisible.v = true;
                this.$Bus.$emit("dataDialogParams", this.previewDialogVisible, this.card.data);
                // this.$Bus.$emit("dataDialogParams", this.previewDialogVisible, artifactId, personal);
                //   {
                //   title: this.card.data.meta_name,
                //   visible: true,
                //   queryUrl: "/data/preview/"+ this.card.data.pk_meta_id,
                //   queryParams: {
                //     offset: 0,
                //     size: 100//TODO:需要设置分页,注意offset要乘以size
                //   }
                // });
            },
        }
    }
</script>

<style>
    .itemHover {
        /*box-shadow:0px 0px 1px 0px #313131;*/
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
    }

    .card-container {
        margin-left: 25px;
        /*padding: 5px 10px 5px 10px;*/
        width: 260px;
    }

    .data-info {
        height: 69px;
        padding: 8px 12px 12px;
        overflow: hidden;
        color: #303c46;
        position: relative;
    }

    .data-info-container {
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .data-name {
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 24px;
        text-align: left;
        font-size: 14px;
        line-height: 22px;
        position: relative;
        margin-right: 102px;
    }

    .data-count {
        text-align: left;
        font-size: 12px;
        line-height: 14px;
        width: 110px;
        color: #222;
        padding: 10px 0 6px;
    }

    .data-date {
        position: absolute;
        right: 2px;
        top: 4px;
        height: 14px;
        font-size: 12px;
        line-height: 14px;
        text-align: left;
        color: #8a9194;
    }

    .data-option {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }

    .data-icon {
        margin: 0;
        border: 0;
        padding-right: 3px;
        font-size: 14px;
        box-sizing: border-box;
        position: relative;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
    }

    .data-option-container {
        position: absolute;
        z-index: 9;
        width: 118px;
        background-color: #fff;
        border-radius: 3px;
        bottom: 30px;
        right: -20px;
        border: 1px solid #d4d8db;
        text-align: left;
        color: #8a9194;
        padding: 6px 0;
    }

    .option-icon {
        width: 18px;
        text-align: center;
        float: left;
        margin-right: 6px;
    }

    .fa-star-full-yellow {
        color: #fbbc07
    }
</style>
